<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">文章图谱提取</h2>
    <br><br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <mat-form-field style="width: 100%">
                <textarea matInput style="height: 200px" [(ngModel)]="text" placeholder="文章"></textarea>
            </mat-form-field>
        </mat-card>
    </div>
    <br>
    <div class="row justify-content-center">
        <button mat-raised-button color="primary" (click)="predict()" [disabled]="sending || !text">
            提取文章图谱
        </button>
    </div>
    <br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <div *ngIf="visNetworkData && !error && ! sending">
                <div style="width: 100%; height: 600px; border: 1px solid lightgray"
                     [visNetwork]="visNetwork"
                     [visNetworkData]="visNetworkData"
                     [visNetworkOptions]="visNetworkOptions">
                </div>
            </div>
            <p *ngIf="!visNetworkData && !sending && !error">
                文章图谱化展示
            </p>

            <div *ngIf="error">
                出错啦...
            </div>

            <div *ngIf="sending">
                正在图谱化...
            </div>
            <mat-spinner *ngIf="sending"></mat-spinner>

        </mat-card>
    </div>


</mat-card>

